import React, { Component } from 'react';
import {
  StyleSheet, View, Text, ImageBackground,
} from 'react-native';

class MyComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  render() {
    return (
      <View style={styles.contain}>
        <Text>背景图片</Text>
        <ImageBackground
          source={{ uri: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1590560297250&di=c902fb1ccd1944a6d2930e900610337e&imgtype=0&src=http%3A%2F%2Fpic.51yuansu.com%2Fpic3%2Fcover%2F01%2F99%2F61%2F5984be221330c_610.jpg' }}
          style={styles.bgView}
          imageStyle={styles.imageStyle}
        >
          <Text style={styles.textStyle}>图片中文本</Text>
        </ImageBackground>
      </View>
    );
  }
}
// ImageBackground源码：https://github.com/facebook/react-native/blob/master/Libraries/Image/ImageBackground.js
const styles = StyleSheet.create({
  contain: {
    flex: 1,
  },
  imageStyle: {
    borderRadius: 20,
  },
  bgView: {
    marginTop: 20,
    width: '100%',
    height: '100%',
  },
  textStyle: {
    paddingLeft: 90,
  },
});
export default MyComponent;
